<template>
  <div class="add-order">
    <div class="bank-account">
      <div ref="dgtools" class="filter-container">
        <div class="dgts-fm">
          <el-input
            clearable
            style="width: 180px"
            placeholder="对方户名"
            v-model="dg.ps.transName"
          ></el-input>
          <el-input
            clearable
            style="width: 180px"
            placeholder="客户名称"
            v-model="dg.ps.cusName"
          ></el-input>
          <el-select
            v-model="dg.ps.timeType"
            placeholder="时间查询类型"
            style="width: 120px"
            @change="handleChangeTime"
          >
            <el-option label="添加时间" value="0"></el-option>
            <el-option label="交易时间" value="1"></el-option>
          </el-select>
          <el-date-picker
            v-model="dg.ps.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
          />
          <el-input
            style="width: 180px"
            placeholder="交易金额"
            v-model="dg.ps.findMoney"
          ></el-input>
          <el-select
            clearable
            v-model="dg.ps.isCheck"
            placeholder="报销状态"
            style="width: 180px"
          >
            <el-option label="已结算" value="-1"></el-option>
            <el-option label="未操作" value="0"></el-option>
            <el-option label="已报销" value="1"></el-option>
          </el-select>
          <el-select
            clearable
            v-model="dg.ps.moneyType"
            placeholder="请选择金额类型"
            style="width: 180px"
          >
            <el-option
              v-for="item in moneyOptions"
              :key="item.id"
              :label="item.typeName"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-input
            clearable
            style="width: 180px"
            placeholder="操作编号"
            v-model="dg.ps.operMark"
          ></el-input>
          <el-input
            clearable
            style="width: 180px"
            placeholder="摘要"
            v-model="dg.ps.remark"
          ></el-input>
          <el-select
            clearable
            v-model="dg.ps.settleUname"
            placeholder="结算人账号选择"
            style="width: 180px"
          >
            <el-option
              v-for="item in staffOptions"
              :key="item.baseUserId.uname"
              :label="item.baseUserId.realName"
              :value="item.baseUserId.uname"
            ></el-option>
          </el-select>
          <el-select
            clearable
            v-model="dg.ps.status"
            placeholder="收支情况"
            style="width: 180px"
          >
            <el-option label="收入" value="0"></el-option>
            <el-option label="支出" value="1"></el-option>
          </el-select>
          <el-input
            clearable
            style="width: 180px"
            placeholder="下订单账号"
            v-model="dg.ps.orderNum"
          ></el-input>
          <el-select
            clearable
            v-model="dg.ps.operUname"
            placeholder="请选择操作员"
            style="width: 180px"
          >
            <el-option
              v-for="item in staffOptions"
              :key="item.baseUserId.id"
              :label="item.baseUserId.realName"
              :value="item.baseUserId.id"
            ></el-option>
          </el-select>

          <el-button type="primary" icon="el-icon-search" @click="getDgList"
            >搜索</el-button
          >
        </div>
      </div>

      <el-table
        :ref="dg.tbName"
        :data="dg.list"
        :height="bodyHeight"
        row-key="id"
        :row-class-name="rowClassName"
        border fit
        @selection-change="selRowChange"
        @select="selRow"
        @expand-change="saveRowExpand"
      >
        <el-table-column
          type="selection"
          width="40"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="标示号"
          prop="unitNum"
          width="120"
        ></el-table-column>
        <el-table-column
          label="交易时间"
          prop="tradeTime"
          width="150"
        ></el-table-column>
        <el-table-column label="下账人" prop="operUser">
          <template slot-scope="{ row }">
            <span>{{ getOperUser(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="银行名称"
          prop="myBankName"
          width="140"
        ></el-table-column>
        <el-table-column
          label="我的银行账号"
          prop="myBankNum"
          width="180"
        ></el-table-column>
        <el-table-column label="报销状态" prop="isCheck" width="100">
          <template slot-scope="{ row }">
            <span>{{ getCheck(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="金额类型"
          prop="moneyTypeId.typeName"
          width="120"
        ></el-table-column>
        <el-table-column label="客户名称" prop="cusName" width="120">
          <template slot-scope="{ row }">
            <span>{{ getCusName(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="借" prop="tradeInMoney"></el-table-column>
        <el-table-column label="对方户名" prop="transName"></el-table-column>
        <el-table-column
          label="对方账号"
          prop="transNum"
          width="150"
        ></el-table-column>
        <el-table-column
          label="添加时间"
          prop="addTime"
          width="150"
        ></el-table-column>
        <el-table-column label="贷" prop="tradeOutMoney"></el-table-column>
        <el-table-column label="余额" prop="balance"></el-table-column>
        <el-table-column
          label="摘要"
          prop="remark"
          width="150"
        ></el-table-column>
        <el-table-column label="操作备注" prop="opermark"></el-table-column>
      </el-table>
      <pagination
        v-show="dg.total > 0"
        :total="dg.total"
        :page.sync="dg.ps.page"
        :limit.sync="dg.ps.rows"
        @pagination="getDgList"
      />

      <input
        ref="inputRef"
        type="file"
        id="file"
        name="file"
        style="display: none"
        @change="handleChange"
      />
      <div>
        <span>收款备注</span>
        <el-input v-model="fm.ps.remark" style="width: 200px" />
      </div>
      <div style="margin: 10px; text-align: center">
        <el-button type="primary" @click="handleSumbit"> 确认收款</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elDragDialog from "@/directive/el-drag-dialog";
import Pagination from "@/components/Pagination";
import {
  getMoneyTypeDict,
  getBankListDict,
  getBtModelDown,
  getStaffCombo,
  gathOnline,
} from "@/api/services/common.service";
import {
  getBankTradeList,
  importTemplate,
  deleteBankAccount,
  serviceGath,
} from "@/api/services/order.service";
export default {
  name: "CollectInternetFreeAdd",
  directives: { elDragDialog },
  props: ["state", "isMoreOne", "row"],
  components: { Pagination },
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },
  data() {
    return {
      // 添加客户-弹框
      addCusMd: { state: false },
      md: {
        state: this.state,
      },
      dg: {
        // 数据列表参数
        tbName: "bankAccountTb",
        loading: true,
        selRows: [], // 所选行数组
        ps: {
          // 过滤参数
          page: 1,
          rows: 20,
          bankNo: "", //银行账号
          transName: "", //对方户名
          cusName: "", //客户名称
          timeType: "0", //时间查询类型
          time: "",
          eTime: "", //结束时间
          sTime: "", //开始时间
          findMoney: "", //交易金额
          isCheck: "", //报销状态
          financeNote: "", //财务备注
          moneyType: "", //金额类型id
          operMark: "", //操作编号
          remark: "", //摘要
          settleUname: "", //结算人账号
          status: "", //收支情况
          orderNum: "", //下账订单号
          operUname: "", //下账人uname
        },
        total: 0,
        list: [],
        rowExpands: [],
      },
      fm: {
        fname: "addOrderFm",
        sb: { load: false, text: "确认添加" },
        ps: {
          btlIds: [], // 银行ID
          orderIds: [], // 订单Id
          remark: "", //财务备注
        },
      },
      currentData: null,
      moneyOptions: [],
      bankOptions: [],
      staffOptions: [],
    };
  },
  watch: {},
  created() {
    this.getDgList();
    this.getDict();
    console.log(this.isMoreOne, this.row, "isMoreOne");
  },
  methods: {
    handleChangeTime() {
      this.dg.ps.time = "";
    },
    getCheck(row) {
      let state = {
        "-1": "已结算",
        0: "未操作",
        1: "已报销",
      };
      return state[row.isCheck] || "--";
    },
    getOperUser(row) {
      if (!row.operUser) {
        return "--";
      }
      return row.operUser;
    },
    getCusName(row) {
      let name = row.cusName;
      if (!name) {
        return "--";
      }
      return name.split("-")[0] || "--";
    },
    getDict() {
      getMoneyTypeDict().then((res) => {
        this.moneyOptions = res.mTypes;
      });
      getBankListDict().then((res) => {
        this.bankOptions = res.banks;
      });
      getStaffCombo({ isContainDriver: 1 }).then((res) => {
        this.staffOptions = res.data;
      });
    },
    /* 关闭弹框 */
    closeMd() {
      // this.$emit("getMdState", false);
    },
    rowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    selRow(selection, row) {
      this.dg.selRows = selection;
    },
    saveRowExpand(row, expandedRows) {
      this.dg.rowExpands.push(row);
    },
    handleChangeTime() {
      this.dg.ps.time = "";
    },
    handleChange(e) {
      let file = e.target.files[0];
      this.UploadFile(file);
    },
    getDgList() {
      let loading = this.U.qloading("数据请求中...");
      let time = this.dg.ps.time;
      if (time) {
        this.dg.ps.sTime = time[0];
        this.dg.ps.eTime = time[1];
      }
      getBankTradeList(this.dg.ps)
        .then((res) => {
          const { totalPay, totalGath, bankBalance, data, count } = res;
          if (res.code === 1) {
            // this.totalPay = totalPay;
            // this.totalGath = totalGath;
            // this.bankBalance = bankBalance;
            this.dg.list = data;
            this.dg.total = count;
            this.U.qclose(loading);
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },

    // 提交确认收款
    handleSumbit() {
      let len = this.dg.selRows.length;
      if (len != 1) {
        this.U.qerror("请选择一条数据");
        return;
      }
      // if (this.isMoreOne == "one" && len > 1) {
      //   this.U.qerror("你选择了2个以上的订单，只能选择一个银行账");
      //   return;
      // }
      const orderIdArr = this.row.map((item) => item.id).join(",");
      const bankIdArr = this.dg.selRows.map((item) => item.id).join(",");
      // this.fm.ps.orderIds = orderIdArr;
      // this.fm.ps.orderIds = bankIdArr;

      const pd = {
        btlIds: bankIdArr,
        orderIds: orderIdArr,
        remark: this.fm.ps.remark,
      };
      gathOnline(pd).then((res) => {
        if (res.code == 1) {
          // this.closeMd();
          this.U.qsuccess("提交成功");
          this.fm.sb.load = false;
          // 调用父组件方法-重新加载数据
          that.$emit("closeModal");
        } else {
          this.U.qsuccess(res.msg);
          this.fm.sb.load = false;
        }
      });
      console.log(this.dg.selRows, "");
    },
  },
};
</script>
<style lang="less" scoped>
</style>